<template>
  <div class="app-search-container clearfix">
    <!-- <div class="search-title fl">条件</div> -->
    <el-form class="search-form" :inline="true" size="small">
      <el-form-item v-for="(item, index) in selectProp['selectList']" :key="index"
        :class="item.type == 'areaMap' && 'area-content'" :label="item.label">
        <template v-if="item.isShow && item.type == 'select'">
          <el-select v-model="item.val" :placeholder="item.placeholder" filterable :clearable="item.clearable">
            <el-option v-for="(i, idx) in item.child" :key="idx" :label="i.dictLabel"
              :value="i.dictValue"></el-option>
          </el-select>
        </template>
        <template v-if="item.isShow && item.type == 'rangeNum'">
          <div class="flex-normal range-item">
            <el-input class="range-input" v-model="item.min" size="small" />
            <span class="range-txt">至</span>
            <el-input class="range-input" v-model="item.max" size="small" />
          </div>
        </template>
        <template v-if="item.isShow && item.type == 'input'">
          <el-input v-model="item.val" :placeholder="item.placeholder" clearable size="small" />
        </template>
        <template v-if="item.isShow && item.type == 'time'">
          <el-date-picker clearable size="small" v-model="item.val" type="daterange" value-format="yyyy-MM-dd"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </template>
        <template v-if="item.type == 'areaMap'">
          <el-select v-for="(areaItem, idx) in item.child" :key="idx" filterable v-model="areaItem.val"
            :placeholder="`${areaItem.placeholder}`" @change="areaChange($event, areaItem)">
            <el-option v-for="(i, idx) in areaItem.child" :key="idx" :label="i.name" :value="i.id">
            </el-option>
          </el-select>
        </template>
      </el-form-item>
      <el-form-item>
        <el-button :type="btn.type" :icon="`el-icon-${btn.icon}`" :key="index"
          v-for="(btn, index) in selectProp['btnList']" v-hasPermi="btn.permi" :loading="btn.loading"
          @click="btnTap(btn)" size='mini'>{{ btn.btnTxt }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import mixinArea from '@/rhComponents/area-select/mixin'
export default {
  name: "searchHeader",
  inheritAttrs: true,
  mixins: [mixinArea],
  data() {
    return {
      selectProp: this.$attrs['select-prop'],
      areaMap: [],
      areaIdx: -1,
    };
  },
  mounted() {
    let _self = this
    _self.areaIdx = _self.selectProp['selectList'].findIndex(item => item.type == 'areaMap')
    if (_self.areaIdx != -1) {
      _self.initAreaSeach(_self.areaIdx)
    }
  },
  methods: {
    initAreaSeach(idx) {
      let _self = this
      _self.areaMap = _self.selectProp['selectList'][idx]['child']
      _self.initAreaMap().then(
        list => {
          _self.getAreaList('province').then(
            areaMap => {
              _self.selectProp['selectList'][idx]['child'].forEach(item => {
                item.name == 'province' && (item.child = areaMap)
                item.name == 'city' && (item.val = '')
              })
            }
          )
        }
      )
    },
    btnTap(btn) {
      let _self = this, params = {}
      let arr = _self.selectProp['selectList'].filter(search => search.isShow)
      let arrTime = arr.filter(search => search.type == 'time')
      if(arrTime.length != 0){
        arrTime.forEach(timeIt => {
          if(timeIt.query){
            params[timeIt.query[0]] = timeIt.val ? timeIt.val[0] : ''
            params[timeIt.query[1]] = timeIt.val ? timeIt.val[1] : ''
          }else{
            params["beginTime"] = timeIt.val ? timeIt.val[0] : ''
            params["endTime"] = timeIt.val ? timeIt.val[1] : ''
          }
        })
      }
      arr.forEach(item => {
        if(item.name){
          _self.$set(params, item.name, item.val)
        }
        if(item.type == 'areaMap'){
          item.child.forEach(i => {
            _self.$set(params, i.name, i.val)
          })
        }
      })
      _self.$emit('search-action', { params, btn })
    },
    areaChange(e, item) {
      let _self = this
      _self.selectProp['selectList'][_self.areaIdx]['val'] = e
      _self.currentTapArea = item
      _self.areaMap.forEach(i => i.name == item.name && (i.val = e))
      let idx = _self.areaMap.findIndex(area => area.name == item.name)
      if (_self.areaMap.length <= idx + 1) return
      _self.$nextTick(() => {
        _self.getAreaList('city', e).then(
          (areaMap) => {
            _self.selectProp['selectList'][_self.areaIdx]['child'].forEach(item => {
              item.name == 'city' && (item.child = areaMap)
              item.name == 'city' && (item.val = '')
            })
          }
        )
      })
    },
  }
};
</script>

<style lang="scss" scoped>
.search-form ::v-deep {
  .el-form-item__label {
    min-width: vw(70);
  }
  .range-item{
    .range-txt{
      font-size: 13px;
      margin: 0 10px;
    }
    .range-input{
      width: 100px;
    }
  }
}

.area-content ::v-deep {
  .el-select+.el-select {
    margin-left: 10px;
  }
}
</style>
